<ul id="sdt_menu" class="sdt_menu">
	<li>
		<a href="<?= $this->Html->url('/') ?>">	
			<?= $this->Html->image('menu/2.jpg'); ?>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Inicio</span>
				<span class="sdt_descr">Quienes somos</span>
			</span>
		</a>
	</li>
	<li>
		<a href="#">
			<?= $this->Html->image('menu/ebenezer-radio.png', array('class'=>'degradado-azul')); ?>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Radio</span>
				<span class="sdt_descr">Programas</span>
			</span>
		</a>
		<div class="sdt_box">
				<a href="#">Kairos Musical</a>
				<a href="#">Revista Dunamis</a>
				<a href="#">La Maquina Maravillosa</a>
				<a href="#">Encuentro con Dios</a>
				<a href="#">Amaneciendo con Cristo</a>
				<a href="#">Momento de Gratidud</a>
				<a href="#">Informe 89</a>
		</div>
	</li>
	<li>
		<a href="#">
			<?= $this->Html->image('menu/logo-dunamis.png', array('class'=>'degradado-azul')); ?>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Dunamis</span>
				<span class="sdt_descr">El TNT de Dios</span>
			</span>
		</a>
	</li>
	<li>
		<a href="#">
			<?= $this->Html->image('menu/logo-ebeneventos.png', array('class'=>'degradado-verde-osc')); ?>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Eventos</span>
				<span class="sdt_descr">Ebeneventos</span>
			</span>
		</a>
	</li>
	<li>
		<a href="#">
			<?= $this->Html->image('menu/6.jpg'); ?>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">La Iglesia</span>
				<span class="sdt_descr">Ministerios</span>
			</span>
		</a>
		<div class="sdt_box">
			<a href="#">Oasis de Esperanza</a>
			<a href="#">Clase Dominical</a>
			<a href="#">Devocionales</a>
		</div>
	</li>
</ul>

<script type="text/javascript">
    $(function() {
		/**
		* for each menu element, on mouseenter, 
		* we enlarge the image, and show both sdt_active span and 
		* sdt_wrap span. If the element has a sub menu (sdt_box),
		* then we slide it - if the element is the last one in the menu
		* we slide it to the left, otherwise to the right
		*/
        $('#sdt_menu > li').bind('mouseenter',function(){
			var $elem = $(this);
			$elem.find('img')
				 .stop(true)
				 .animate({
					'width':'190px',
					'height':'190px',
					'left':'0px'
				 },400,'easeOutBack')
				 .andSelf()
				 .find('.sdt_wrap')
			     .stop(true)
				 .animate({'top':'140px'},500,'easeOutBack')
				 .andSelf()
				 .find('.sdt_active')
			     .stop(true)
				 .animate({'height':'190px'},300,function(){
				var $sub_menu = $elem.find('.sdt_box');
				if($sub_menu.length){
					var left = '190px';
					if($elem.parent().children().length == $elem.index()+1)
						left = '-190px';
					$sub_menu.show().animate({'left':left},200);
				}	
			});
		}).bind('mouseleave',function(){
			var $elem = $(this);
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length)
				$sub_menu.hide().css('left','0px');
			
			$elem.find('.sdt_active')
				 .stop(true)
				 .animate({'height':'0px'},300)
				 .andSelf().find('img')
				 .stop(true)
				 .animate({
					'width':'0px',
					'height':'0px',
					'left':'85px'},400)
				 .andSelf()
				 .find('.sdt_wrap')
				 .stop(true)
				 .animate({'top':'10px'},500);
		});
    });
</script>